<template>
  <div class="Dashboard">
    <div class="navbar">
      <div class="topbar">
        <div class="title">围老商户后台管理系统</div>
        <div v-if="loginUser" class="infos">
          <el-image
            style="width: 40px; height: 40px; border-radius: 50%; margin-right: 15px;"
            :src="require('@/assets/images/avatar.jpg')"
            fit="cover"
          />
          <div class="account">{{ loginUser }}</div>
          <el-button style="margin-left: 10px;" type="primary" icon="el-icon-switch-button" @click="logout">退出</el-button>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="ele-title">
        <div class="ele-img"><img src="../../../../public/testimg.png" alt=""></div>
        <div class="ele-add-item">
          <span>店铺列表</span>
          <el-button type="primary" @click="addShop">添加店铺</el-button>
        </div>
        <div class="ele-content">
          <el-card v-for="(item,index) in shopList" :key="index" class="ele-card" style="cursor: pointer" @click.native="showDetailShop(item)">
            <template slot="header">
              <div class="crad-head">
                <div style="float:left;" class="left-title">
                  {{ item.busiName }}&nbsp;<span
                    v-show="item.stat === 3"
                    style="margin-left: 20px;color: red;cursor: pointer"
                    @click.stop="delShopDialog(item)"
                  >删除店铺</span>
                </div>
                <div style="float:right" class="right-title">
                  <span v-if="item.stat === 1">审核中</span>
                  <span v-else-if="item.stat === 2">审核不通过</span>
                  <span v-else-if="item.stat === 0">未提交审核</span>
                  <span v-else />
                </div>
              </div>
            </template>
            <div class="crad-content">
              <p v-if="item.city==='市辖区'">
                地址：{{ item.province }}{{ item.village }}{{ item.address }}
                <el-button
                  v-if="item.stat === 1 || item.stat === 2"
                  plain
                  type="primary"
                  @click.stop="shopDetails(item)"
                >查看</el-button>
                <el-button
                  v-if="item.stat=== 3"
                  plain
                  type="primary"
                  @click.stop="serveAdmin(item)"
                >管理店铺</el-button>
                <el-button
                  v-if="item.stat=== 0"
                  plain
                  type="primary"
                  @click.stop="editShop(item)"
                >编辑店铺</el-button>
              </p>
              <p v-if="item.city!=='市辖区'">
                地址：{{ item.province }}{{ item.city }}{{ item.village }}{{ item.address }}
                <el-button
                  v-if="item.stat === 1 || item.stat === 2"
                  plain
                  type="primary"
                  @click.stop="shopDetails(item)"
                >查看</el-button>
                <el-button
                  v-if="item.stat=== 3"
                  plain
                  type="primary"
                  @click.stop="serveAdmin(item)"
                >管理店铺</el-button>
                <el-button
                  v-if="item.stat=== 0"
                  plain
                  type="primary"
                  @click.stop="editShop(item)"
                >编辑店铺</el-button>
              </p>
              <p>管理员:{{ item.concat }}&nbsp;{{ item.phone }}</p>
            </div>
          </el-card>

          <!-- <el-card class="ele-card">
          <div slot="header">
            <div style="float:left" class="left-title">xxx大药房</div>
            <div style="float:right" class="right-title">
              <span>审核中</span>
              <span>审核不通过</span>
            </div>
          </div>
          <div class="crad-content">
            <p>
              地址:123134243243134
              <el-button
                plain
                type="primary"
                @click="shopDetails"
              >查看</el-button>
            </p>
            <p>管理员：2341414142</p>
          </div>
        </el-card>

        <el-card class="ele-card">
          <div slot="header">
            <div style="float:left" class="left-title">xxx大药房</div>
            <div style="float:right" class="right-title">
              <span>审核中</span>
              <span>审核不通过</span>
              <span />
            </div>
          </div>
          <div class="crad-content">
            <p>
              地址:123134243243134
              <el-button plain type="primary">查看</el-button>
            </p>
            <p>管理员：2341414142</p>
          </div>
        </el-card>
        <el-card class="ele-card">
          <div slot="header">
            <div style="float:left" class="left-title">xxx大药房</div>
            <el-button
              type="text"
              class="center-title"
              @click="handleShowDelShop()"
            >删除店铺</el-button>
            <div style="float:right" class="right-title">
              <span>审核中</span>
              <span>审核不通过</span>
              <span />
            </div>
          </div>
          <div class="crad-content">
            <p>
              地址:123134243243134
              <el-button
                plain
                type="primary"
                @click="getDetails"
              >查看</el-button>
            </p>
            <p>管理员：2341414142</p>
          </div>
        </el-card> -->
          <el-button
            plain
            icon="el-icon-plus"
            class="el-btn-add"
            @click="addShop"
          >添加店铺</el-button>
        </div>
        <div class="ele-bottom">
          <p>如何申请店铺:</p>
          <p>
            店铺类型分为企业店铺和个人店铺，企业店铺拥有更多的功能。请根据以下步骤进行申请开通。
          </p>
          <p>
            1、申请企业店铺∶
            通过添加店铺提交商户基本信息、企业营业执照、法人身份证，待我公司审核通过后就可以使用店铺功能。
          </p>
          <p>
            2、申请个人店铺∶通过添加店铺提交商户基本信息、个人身份证，待我公司审核通过后就可以使用店铺功能。
          </p>
          <p>⑥ 2016-2021 互邦老宝贝（苏州）科技有限公司</p>
        </div>
      </div>
      <!-- 删除店铺对话框 -->
      <el-dialog
        :modal="false"
        :visible.sync="delDialog"
        class="ele-delShop"
        :before-close="handleShowDelShop"
        width="30%"
      >
        <template slot="title">
          <span class="el-dialog-title">提示</span>
        </template>
        <p class="del-shop-down">
          删除店铺后，店铺内所有数据将会被删除，因此造成的损失，平台概不负责，请确认删除店铺的风险后在进行删除操作。
        </p>
        <div class="del-content">
          <p>短信验证码</p>
          <el-row>
            <el-col :span="14"><el-input v-model="delVerCode" placeholder="请输入验证码" /></el-col>
            <el-col
              :span="2"
              :offset="1"
            ><el-button v-show="show" type="primary" @click="getVerCodeByMessage">获取验证码</el-button>
              <el-button v-show="!show">{{ count }}秒后可以重发</el-button></el-col>
          </el-row>
          <p>
            <span>未收到验证码？</span><el-button type="text">点击使用语音验证码</el-button>
          </p>
          <p class="ele-font-del">
            验证码将发送到{{ phone }}手机上，请注意查收
          </p>
          <p><el-checkbox v-model="Risks">我已知晓删除店铺的风险</el-checkbox></p>
        </div>
        <template slot="footer" class="del-footer">
          <el-button type="primary" @click="deletdShop">确认删除</el-button>
          <el-button plain @click="delDialog=!delDialog">取消</el-button>
        </template>
      </el-dialog>
    </div>
  </div></template>

<script>
import { listShop, delShop } from '@/api/shop.js'
import { getID, getToken, setShopID, setShopList, removeShopList } from '@/utils/auth'
import { getVerCode } from '@/api/auth'

export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      userId: '',
      // dialog
      id: '',
      shopList: [],
      delDialog: false,
      phone: '',
      /** 倒计时*/
      show: true,
      count: '',
      timer: null,
      Risks: true,
      delVerCode: '',
      loginUser: null
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
    /* 获取用户id*/
    /* ...mapGetters({

      })*/
  },
  created() {
    this.init()
    this.loginUser = this.$dd(localStorage.getItem('login-user')).loginUser
  },
  methods: {
    logout() {
      const vm = this
      vm.$confirm('确认退出登录吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$store.dispatch('LogOut').then(() => {
          vm.$router.push(`/LoginPage?redirect=${vm.$route.fullPath}`)
        })
      }).catch(() => {})
    },
    /** 获取验证码*/
    getVerCodeByVoice() {
      getVerCode(this.phone, 2, 1).then(response => {
        console.log(response.data)
      })
    },
    getVerCodeByMessage() {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      getVerCode(this.phone, 2, 0).then(response => {
        console.log(response.data)
        this.delverCode = ''
      })
    },
    /** 店铺界面加载 */
    init() {
      this.getList()
    },
    /* showDetail(item) {
      console.log(1)
    },*/
    getList() {
      const data = {
        id: getID()
      }
      listShop(data)
        .then(response => {
          this.shopList = response.data.data
          setShopList(this, {
            list: this.shopList
          })
        })
        .catch(() => {
          this.shopList = []
          removeShopList()
        })
    },
    serveAdmin(item) {
      setShopList(this, {
        list: this.shopList
      })
      localStorage.setItem('shopName', item.busiName)
      setShopID(item.id)
      this.$router.push({ name: 'MainPage' })
    },
    /** 查看 */
    shopDetails(data) {
      console.log(data)
      this.$router.push({ name: 'UserShopDetails',
        query: {
          p: this.$ed(
            {
              data
            }
          )
        }
      })
    },
    /** 删除弹出框*/
    delShopDialog(data) {
      this.delDialog = true
      this.phone = data.phone
      this.id = data.id
    },
    /** 删除店铺 */
    deletdShop() {
      if (!this.delVerCode) {
        return this.$message.error('验证码不能为空')
      }
      if (!this.Risks) {
        return this.$message.error('请确认删除风险')
      }
      delShop({ id: this.id, contract: this.phone, code: this.delVerCode })
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.delDialog = false
          this.getList()
        })
        .catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.errmsg
          })
        })
    },
    handleShowDelShop() {
      this.delDialog = !this.delDialog
    },
    /** 添加商店 */
    addShop() {
      this.$router.push({ name: 'AddShop' })
      /* this.dialogVisible = true*/
    },
    editShop(data) {
      console.log(data)
      this.$router.push({ name: 'AddShop',
        query: {
          p: this.$ed(
            {
              edit: true,
              data: data
            }
          ) }})
    },
    /** 查看 */
    showDetailShop(item) {
      if (item.stat === 0) {
        this.editShop(item)
      } else if (item.stat === 1 || item.stat === 2) {
        this.shopDetails(item)
      } else if (item.stat === 3) {
        this.$router.push({ name: 'AddShop',
          query: {
            p: this.$ed(
              {
                detail: true,
                data: item
              }
            ) }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .Dashboard {

    .navbar {
      z-index: 100;
      width: 100%;
      background: #1890ff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 64px;
      position: fixed;
      top: 0;

      .topbar {
        padding: 0 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 1200px;

        .title {
          color: #ffffff;
          font-size: 20px;
          font-weight: bold;
        }

        .infos {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;

          .account {
            font-size: 14px;
            color: #ffffff;
          }
        }

      }
    }

    .page-body {
      margin: 0 auto;
      padding-top: 64px;
      width: 1024px;
    }

    .ele-title {
      width: 100%;
      margin-top: 5%;
      h3 {
        letter-spacing: 3px;
      }
    }
    .ele-img {
      width: 100%;
      height: 200px;
      margin-top: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .ele-add-item {
      height: 60px;
      margin-top: 40px;
      background: #f3f3f3;
      border-radius: 5px;
      padding: 0px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-weight: 600;
      }
    }
    .ele-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .ele-card {
        width: 48%;
        margin-top: 4%;
        .left-title {
          font-size: 1.3rem;
        }
        .right-title,
        .center-title {
          color: red;
        }
        .center-title {
          padding: 0;
          transform: translateY(20%);
          margin-left: 25px;
        }
        ::v-deep.el-card__header {
          border: none !important;
        }
        .crad-content {
          p {
            margin: 0;
          }
          p:first-child {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          }
        }
      }
      .el-btn-add {
        width: 48%;
        height: 142px;
        margin-top: 4%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24px;
      }
    }
    .ele-bottom {
      margin-top: 100px;
      padding-bottom: 100px;
      p:last-child {
        text-align: center;
        margin-top: 50px;
      }
    }
    .ele-delShop {
      ::v-deep.el-dialog > .el-dialog__header {
        text-align: center;
      }
      .el-dialog-title {
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }
      .del-shop-down {
        color: red;
        line-height: 20px;
        font-size: 16px;
      }
      .del-content {
        padding: 0px 20px;
        .ele-font-del {
          margin: 20px 0px;
        }
      }
      ::v-deep.el-dialog__footer {
        display: flex;
        justify-content: space-around;
        .el-button {
          width: 200px;
          height: 50px;
        }
      }
    }
  }
</style>
